<template>
	<view class="purIndex">
		<!-- 采购管理 -->
		<view class="top-box">
			<view :class="headWhite?'head2':'head'">
				<view class="sear-box">
					<text class="iconfont icon-sousuo iconsear" @click="searchItem"></text>
					<input  type="text" @confirm="searchItem" v-model="queryData.searchText"
						placeholder-class="pla-class" placeholder="搜索" class="sear-inp" />
					<text @click="clearText" class="iconfont icon-guanbi guanicon"></text>
				</view>
			</view>
		</view>
		<!-- 产品部分开始 -->
		<view class="pro_box" style="margin-top: 90rpx;">
			<view v-for="(item,index) in tipList" :key="index" style="padding: 0 20rpx; border-bottom: 1rpx solid #EEEEEE;">
				<view class="u-flex u-row-between">
					<view class="t-conten">
						<image :src="item && item.image[0]" mode="" class="img-item"></image>
						<text class="img-title">{{item.title}}</text>
					</view>
					<view class="u-flex u-flex-col">
						<button type="warn" style="font-size: 28rpx;" @click="delItem({item:item,index:index})" >删除</button>
						<button type="primary"  style="font-size: 28rpx;margin-top: 20rpx;" @click="upDateItem({item:item,index:index})">{{item.state == 1?'禁用':'公开'}}</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="fix-add u-flex u-row-center u-col-center" @click="addItem()">
			<u-image width="40rpx" height="40rpx" src="https://job.ydylmold.cn/mingpian/image/editImg/add-img.png"></u-image>
		</view>
		<u-loadmore :status="status"></u-loadmore>
		<!-- 产品部分结束 -->
	</view>
</template>
<script>
	import {
		getPageDataAllPro,
		deletePro,
		updateStatePro
	} from '@/common/api/auth.js'
	import {
		getToken
	} from '@/utils/token.js'
	import {mapGetters} from 'vuex'
	import {
		duplicateRemoval
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				tipList: [],
				queryData: {
					stationType: '', //是	string	类型
					// moduleNo:'ydylapp1001',//是	string	模块编号
					companyId: '', //是	string	用户编号不为null默认字符“0”，切换公司是填写公司编号。
					searchText: '', //非选	string	搜索字段
					'page.current': 1
				},
				headWhite: false,
				allPage: 1,
				status: 'loading',
				buttonList: [{
					background: '#a8a8a8',
					color: '#fff',
					events: 'upDate',
					name: '禁用',
					iconColor: "#fff",
					state: '1'
				}, {
					background: '#0080FF',
					color: '#fff',
					events: 'upDate',
					name: '公开',
					iconColor: "#fff",
					state: '0'
				}, {
					background: '#FF4848',
					color: '#fff',
					events: 'del',
					name: '删除',
					iconColor: "#fff",
				}],
				noText: '',
				listType: '', //1为产品列表，4为环境列表
			};
		},
		onReachBottom: function() {
			if (this.allPage > this.queryData['page.current'] && this.status == 'nomore') {
				this.queryData['page.current']++
				this.getQueryList()
			} else {
				this.noText = '没有更多数据了'
			}
		},
		onShow: function() {
			if (this.isFresh) {
				this.tipList = []
				this.getQueryList()
			}
		},
		computed: {
			...mapGetters(['isFresh']),
		},
		onPullDownRefresh() {
			this.initData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad: function(option) {
			this.listType = Number(option.type)
			//获取用户信息
			this.queryData.companyId = getToken('useNum')
			this.queryData.stationType = this.listType
			this.getQueryList()
		},
		onPageScroll(e) {
			if (e.scrollTop >= 10) {
				this.headWhite = true
			} else {
				this.headWhite = false
			}
		},
		methods: {
			//点击第一个button
			upDateItem(data) {
				let state = ''
				if (data.item.state == '1') {
					state = '0'
				} else {
					state = '1'
				}
				updateStatePro({
					'state': state,
					'id': data.item.stationId
				}).then(res => {
					if (res.data && res.data.code == 0) {
						uni.showToast({
							title: res.data && res.data.msg,
							icon: 'none'
						})
					} else {
						this.$store.commit('isFresh', true)
						if (data.item.state == '1') {
							this.tipList[data.index].state = '0'
						} else {
							this.tipList[data.index].state = '1'
						}
						
					}
				})
			},
			//点击第二个button
			delItem(data) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除这条记录吗？',
					success: res => {
						if (res.confirm) {
							deletePro({
								'id': data.item.stationId
							}).then(res => {
								if (res.data && res.data.code == 1) {
									this.tipList.splice(data.index, 1)
									this.$store.commit('isFresh', true)
								} else {
									uni.showToast({
										title: '删除失败',
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			
			initData() {
				this.queryData['page.current'] = 1
				this.tipList = []
				this.getQueryList()
			},
			getQueryList() { //获取列表
				this.status = 'loading'
				getPageDataAllPro(this.queryData).then(res => {
					let data = res.data && res.data.rows
					if (data && data.length) {
						// 数据请求成功
						data.forEach((item, index) => {
							let arrImg = item.imgName.split(',')
							let listImg = []
							let imgUrl
							if (this.listType == 1) {
								imgUrl ='https://www.ydylmold.cn/images/ydylapp/usrCompanyStation/mainProductsImage/'
							} else if (this.listType == 4) {
								imgUrl ='https://www.ydylmold.cn/images/ydylapp/usrCompanyStation/enterprisePicImage/' 
							}
							arrImg.forEach(i => {
								listImg.push(imgUrl + i)
							})
							item.image = listImg
							item.title = item.productName
							item.isShare = true
							item.slide_x = 0
						})
						
						this.tipList = duplicateRemoval(this.tipList,data,'productName')
						this.allPage = res.total
						
					}
					this.status = 'nomore'
				}).catch(err => {
					this.status = 'nomore'
				})
			},
			//点击搜索
			searchItem() {
				this.tipList = []
				this.getQueryList()
			},
			//清空搜索字体
			clearText() {
				this.queryData.searchText = ''
			},
			toback() {
				uni.navigateBack({})
			},
			addItem() {
				uni.navigateTo({
					url: `./compDataEdit?type=${this.listType}`
				})
			}
		}
	}
</script>
<style scoped>
	.fix-add{
		position: fixed;
		right: 30rpx;
		bottom: 270rpx;
		z-index: 999;
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		background: rgba(29, 168, 254, 1);
	}
	.t-conten {
		background-color: #FFFFFF;
		height: 300rpx;
		display: flex;
		align-items: center;
	}

	.img-item {
		width: 280rpx;
		height: 280rpx;
		margin: 0 20rpx;
	}

	.iconback {
		font-size: 45rpx;
		padding-left: 32rpx;
	}

	.top-box {
		position: fixed;
		top: 0rpx;
		width: 750rpx;
		z-index: 999;
	}

	.head {
		display: flex;
		align-items: center;
		z-index: 999;
		width: 100%;
		background-color: #F8F8F8;
	}

	.head2 {
		display: flex;
		align-items: center;
		z-index: 999;
		background-color: #2c8cff;
		width: 100%;
	}

	.guanicon {
		padding: 20rpx;
		color: #A8A8A8;
	}

	.sear-box {
		/* width: 600rpx; */
		flex: 1;
		height: 56rpx;
		background-color: #ffffff;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		margin: 20rpx 25rpx;
	}

	.iconsear {
		margin-left: 40rpx;
		font-size: 35rpx;
	}

	.sear-inp {
		flex: 1;
		padding-left: 20rpx;
	}

	.pla-class {
		font-size: 32rpx;
		color: #808080;
	}

	/* 产品部分 */
	.product {
		padding: 130rpx 20rpx 20rpx 20rpx;
		border-radius: 12rpx;
		width: 708rpx;
	}

	.nav {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 708rpx;
		padding: 20rpx 0 0 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	#nav-top-box {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-top-text {
		font-size: 28rpx;
		color: #4d4d4d;
		margin-bottom: 40rpx;
	}

	.nav-top-text2 {
		text-align: center;
		font-size: 32rpx;
		color: var(--themeColor);
		font-weight: bold;
	}

	.bor {
		width: 120rpx;
		height: 4rpx;
		background-color: var(--themeColor);
		margin: 20rpx 0;
	}

	.conbox {
		width: 236rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.product-con {
		width: 708rpx;
		background-color: #fff;
	}

	.pro-item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e1e1e1;
		padding: 20rpx;
	}

	.pro-item-img {
		width: 200rpx;
		height: 150rpx;
		border-radius: 12rpx;
	}

	.pro-title {
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28rpx;
		/* font-weight: bold; */
		color: #1a1a1a;
	}

	.pro-meter {
		font-size: 24rpx;
		color: #1a1a1a;
	}

	.pro-info {
		width: 448rpx;
		height: 150rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #4d4d4d;
		line-height: 40rpx;
	}

	.pro-info-box1,
	.pro-info-box2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
